<template>
    <!-- 历史版本记录，可以删除 -->
    <div class="box" ref="box">
        <div class="swiper-container ">
            <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide v-for="(item,index) in pimg" :key="index">
                    <img :src="item.picUrl" alt="" v-if="showBg">
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <div class="cate catetop">
            <p class="Integral name color">￥{{catedetails.salePrice||0}}</p>
            <!-- <p class="Integral name color">{{catedetails.Integral||0}}积分+{{catedetails.salePrice||0}}元</p> -->
            <p class="zhuan">专柜价：￥{{catedetails.bazaarPrice}}</p>
            <p class="name nameNew">{{catedetails.productName}}</p>
            <p v-if="(catedetails.productType==3)||(catedetails.productType==4)">
                有效期：
                <span class="graycolor">{{catedetails.startDate}}至{{catedetails.endDate}}</span>
            </p>
            <p v-if="catedetails.productType==1" class="graycolor">运费：{{catedetails.freight}}元</p>
        </div>
        <div style="height:150px"></div>
        <div class="cate">
            <div class="youhui" @click="clickshowquan">
                <p class="colorss">&nbsp;商品优惠 &nbsp;
                    <!-- <span v-for=" (item,index) in selectquan" :key='index'>
                        {{item.couponName}}&nbsp;
                    </span> -->
                </p>
                <span>
                    <span v-if="mchtCouponList.length" class="useState">{{mchtCouponList.length?mchtCouponList[0].couponName:''}}</span>
                    <img src="../../../assets/btn_back.png" alt="">
                </span>

            </div>
        </div>
        <div class="padding">
            <p><img src="../../../images/Group 38.png" alt="" srcset="">
                <span>详情</span>
                <span>——————————————————————————</span>
            </p>
        </div>
        <div class="details" v-html="catedetails.productDetails" ref="details">
            <img src="../../../assets/myquan.png" alt="">
        </div>
        <!--规格选择 -->
        <div v-if="specifiCations" style="padding:0;" class="couponList">
            <mt-popup position="bottom" class="bottoms" v-model="specifiCations" style="padding-bottom:3.5rem;">
                <div>
                    <div class="hide" style="text-align:right;display:none;" @click="hideSpecifiCations">x</div>
                    <div class="guige">
                        <div class="list">
                            <img :src="imgs" alt="" class="imgcla">
                            <div class="con">
                                <div class="name"><span>{{catedetails.productName}}</span></div>
                                <div class="intg">{{gShopPrice}}元</div>
                            </div>
                        </div>
                        <div class="guigeContent">
                            <div class="content" v-for="(item,index) in guigearr" :key="index" v-if="guigearr.length>0">
                                <div class="key">{{item.parentName}}</div>
                                <div class="word">
                                    <ul v-for="(itemchild,indexchild) in item.specList" :key="indexchild">
                                        <li @click="lijiclick($event,itemchild,catedetails)" :spc="itemchild.specId" ref="guige" :spcname="itemchild.specName">
                                            {{itemchild.specName}}
                                        </li>
                                        
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div v-if="guigearr.length<=0" style="height:50px;line-height:50px">暂无规格</div>
                    </div>
                    <div class="numbutton" @click="paySpecifiCations" v-if="gType=='1'">
                        立即购买
                    </div>
                    <div class="numbutton" @click="payaddshop(catedetails)" v-if="gType=='2'">
                        加入购物车
                    </div>
                </div>
            </mt-popup>
        </div>

        <!--规格选择   -->

        <!--优惠券选择 -->
        <div class="couponLists">
            <mt-popup position="bottom" class="bottoms" v-model="showquan">
                <div>
                    <div class="hide" @click="hidequan">查看优惠券</div>
                    
                    <div class="couponChoose">
                        <div class="quans" v-for=" (item,index) in mchtCouponList" :key='index'>
                            <div class="left">
                                <p>{{item.couponName}}</p>
                                <p class="colors">面值：{{item.denomination|denomination(item.type)}} &nbsp;&nbsp;&nbsp;
                                    <span>数量：{{item.usableCount}}张</span>
                                </p>
                                <p>有效期：{{item.validatyBeginDes}}至{{item.validatyEndDes}}</p>
                            </div>
                            <div class="right">
                                <!-- <check-icon :value.sync="item.haveclick"></check-icon>
                                <p @click="addquan(item)">立即领取</p> -->
                            </div>
                        </div>
                    </div>
                    <div class="wan" @click="quanok(catedetails.productCoupons)">关闭</div>
                </div>
            </mt-popup> 
        </div>

        <!-- 优惠券选择  -->
        <div class="flexfa">
            <div></div>
            <div>
                <p @click="paymoney(catedetails)">立即购买</p>
                <p @click="addshop(catedetails)">加入购物车</p>
            </div>
        </div>
    </div>
</template>
<script>
// 1实物 2彩票 3券
// payMethod
// 1-RMB
// 2-积分
// 3-RMB+积分
import { Group, CheckIcon, XNumber } from "vux";
import { MessageBox, Toast } from "mint-ui";
import {
    myProductVouchers,
    getCoupon,
    myProductCoupon,
    getProductDetails,
    createOrder,
    integralExchangeProduct,
    queryProductSpec,
    Shopset,
    queryProductSpecByPrice
} from "src/methods/request.js";
import { formats } from "src/methods/synchronous.js";
var pic = require("../../../assets/nofound.jpg");
export default {
    name: "detal",
    data() {
        return {
            swiperOption: {
                autoplay: {
                    delay: 5000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                },
                pagination: {
                    el: ".swiper-pagination",
                    type: "fraction"
                }
            },
            catedetails: {},
            demo1: false,
            showBg: false,
            pimg: [{ picUrl: pic }],
            route: {},
            Integral: "",
            imglength: "",
            specifiCations: false,
            buynum: 1,
            imgs: "",
            guigearr: [],
            speclist: [],
            specString: "",
            gType: "", //1为立即购买，2为加入购物车,
            gShopPrice: "",
            showquan: false,
            selectquan: [],
            mchtCouponList: [] //商品优惠券列表
        };
    },
    components: {
        XNumber,
        Group,
        CheckIcon
    },
    computed: {
        imgUrl() {
            return this.$store._modules.root._children.a.state;
        },
        prelist() {
            return this.$store.state.d.prelist;
        },
        myresult() {
            return this.$store.state.e.myresult;
        }
    },
    created() {
        // $router 直接监听无效，尚未查明，故作深拷贝处理
        this.route = Object.assign({}, this.$route);
    },
    mounted() {
        window.scrollTo(0,0);
    },
    methods: {
        hidequan() {
            this.showquan = false;
        },
        clickshowquan() {
            if (this.mchtCouponList.length != 0) {
                this.showquan = true;
            } else {
                Toast({
                    message: "暂无优惠券可选",
                    position: "middle",
                    duration: 1000
                });
            }
        },
        quanok(val) {
            console.log(val)
            this.selectquan = [];
            for (
                var i = 0;
                i < this.catedetails.productCoupons[0].couponList.length;
                i++
            ) {
                var item = this.catedetails.productCoupons[0].couponList[i];
                if (item.haveclick) {
                    this.selectquan.push({ couponName: item.couponName });
                }
            }
            console.log(this.selectquan)
            this.showquan = false;
        },
        // 1.开始点击添加购物车
        async addshop(item) {
            this.gType = "2";
            await queryProductSpec({ productId: item.id })
                .then(response => {
                    this.guigearr = response.data.productSpecList;
                })
                .catch(error => console.log(error));
            //是否有规格
            if (this.guigearr.length == 0) {
                let productNo = this.route.query.cateNo;
                var letjson = {
                    isAdd: "01",
                    productNo: productNo,
                    buynum: "1"
                };
                this.addlast(letjson);
            } else {
                this.specifiCations = true;
                this.gShopPrice = this.catedetails.salePrice;
            }
        },
        // 2.出现规格后，立即加入购物车
        payaddshop() {
            //购物车选择规格数据
            var Gstring = "";
            var selectNum = 0;
            let lis = this.$refs.guige;
            for (var i = 0; i < lis.length; i++) {
                if (
                    lis[i].parentNode.style.backgroundColor ==
                    "rgb(245, 72, 65)"
                ) {
                    Gstring += lis[i].getAttribute("spc") + ",";
                    selectNum++;
                }
            }
            Gstring = Gstring.substr(0, Gstring.length - 1);
            //购物车选择规格数据
            let productNo = this.route.query.cateNo;
            var letjson = {
                isAdd: "01",
                productNo: productNo,
                specIds: Gstring,
                buynum: "1"
            };
            if (selectNum == this.guigearr.length) {
                this.addlast(letjson);
            } else {
                Toast({
                    message: "请选择规格",
                    position: "middle",
                    duration: 3000
                });
            }
        },
        //3.加入购物车,发送请求

        addlast(letjson) {
            this.counts = (this.counts || 1) + 1;
            this.$vux.loading.show({
                text: "Loading"
            });
            Shopset(letjson)
                .then(response => {
                    if (response.rspCode == "0000") {
                        if (response.data.code == "0000") {
                            this.specifiCations = false;
                            Toast({
                                message:
                                    response.data.rspMsg || "加入购物车成功",
                                position: "middle",
                                duration: 3000
                            });
                        } else {
                            this.specifiCations = false;
                            Toast({
                                message:
                                    response.data.rspMsg || "加入购物车失败",
                                position: "middle",
                                duration: 3000
                            });
                        }
                    } else {
                        this.specifiCations = false;
                        Toast({
                            message: response.data.rspMsg || "加入购物车失败",
                            position: "middle",
                            duration: 3000
                        });
                    }
                    this.$vux.loading.hide();
                })
                .catch(error => {
                    this.$vux.loading.hide();
                    this.specifiCations = false;
                    Toast({
                        message: "请求失败",
                        position: "middle",
                        duration: 3000
                    });
                });
        },
        // 下一页用值
        setres() {
            var addshops = {};
            //设置确认订单值，存入缓存
            var addshops = {
                salePrice: this.gShopPrice,
                Integral: this.catedetails.Integral,
                productNo: this.route.query.cateNo,
                productName: this.catedetails.productName,
                productType: this.catedetails.productType,
                freight: this.catedetails.freight,
                number: 1,
                specList: this.speclist,
                specString: this.specString,
                productCoupons:
                    (this.catedetails.productCoupons + "").length > 0
                        ? this.catedetails.productCoupons[0].couponList
                        : []
            };
            if (this.catedetails.productBannerList.length < 1) {
                addshops.imgurl = "";
            } else {
                addshops.imgurl = this.catedetails.productBannerList[0].picUrl;
            }
            this.$store.commit("resetaddress", addshops);
        },
        getprodetail() {
            let routerParams = this.route.query.cateNo;
            // 发送请求数据
            this.$vux.loading.show({
                text: "Loading"
            });
            getProductDetails({ productNo: routerParams })
                .then(response => {
                    // console.log(response)
                    this.catedetails = Object.assign({}, response.data);
                    this.Integral = this.catedetails.Integral;
                    this.catedetails.startDate = formats(
                        this.catedetails.startDate
                    );
                    this.catedetails.endDate = formats(
                        this.catedetails.endDate
                    );
                    this.imglength = this.catedetails.productBannerList.length;
                    if (this.catedetails.productCoupons.length != 0) {
                        for (
                            var i = 0;
                            i <
                            this.catedetails.productCoupons[0].couponList
                                .length;
                            i++
                        ) {
                            this.catedetails.productCoupons[0].couponList[i]
                                .haveclick == false;
                            this.catedetails.productCoupons[0].couponList[
                                i
                            ].validatyBegin = formats(
                                this.catedetails.productCoupons[0].couponList[i]
                                    .validatyBegin
                            );
                            this.catedetails.productCoupons[0].couponList[
                                i
                            ].validatyEnd = formats(
                                this.catedetails.productCoupons[0].couponList[i]
                                    .validatyEnd
                            );
                        }
                    }

                    if (!(this.imglength < 1)) {
                        // 图片加域名
                        for (var item of this.catedetails.productBannerList) {
                            item.picUrl = this.imgUrl + item.picUrl;
                        }
                        this.pimg = this.catedetails.productBannerList;
                        this.imgs = this.catedetails.productBannerList[0].picUrl;
                    }
                    this.showBg = true;
                    this.$vux.loading.hide();
                })
                .catch(error => {
                    this.$vux.loading.hide();
                    this.showBg = true;
                    console.log(error);
                });
            myProductVouchers({
                productNo: routerParams,
                productList: [{ productNo: routerParams }]
            }).then(res => {
                if (res.data.resultCode == "00") {
                    this.mchtCouponList = res.data.couponList[0] ? res.data.couponList[0].couponList.map((item)=>{
                        item.haveclick = item.couponNo == res.data.checkedCouponNo;
                        return item;
                    }) : [];
                    this.$store.commit("mchtCouponList", this.mchtCouponList);
                } else {
                    Toast({
                        message: res.data.resultMesg,
                        position: "middle",
                        duration: 3000
                    });
                }
            });
        },
        //1.开始点击立即购买，出现规格选择框
        async paymoney(item) {
            this.gType = "1";
            //获取规格
            this.$vux.loading.show({
                text: "Loading"
            });
            await queryProductSpec({ productId: item.id })
                .then(response => {
                    this.guigearr = response.data.productSpecList;
                    this.$vux.loading.hide();
                })
                .catch(error => {
                    this.$vux.loading.hide();
                    console.log(error);
                });
            //是否有规格
            if (this.guigearr.length == 0) {
                // 存储下一界面所需数据,去确认订单
                this.gShopPrice = this.catedetails.salePrice;
                this.setres();
                this.$store.commit("cateNo", this.route.query.cateNo);
                this.$router.push({
                    path: "/goodsResult",
                    query:{
                        cateNo:this.$route.query.cateNo,
                        types:'00'
                    }
                });
            } else {
                this.specifiCations = true;
                this.gShopPrice = this.catedetails.salePrice;
            }
        },

        //2.选好规格，去确认订单页面
        paySpecifiCations() {
            //购物车选择规格数据
            var Garr = [];
            var Gstring = "";
            var selectNum = 0;
            let lis = this.$refs.guige;
            if (lis) {
                for (var i = 0; i < lis.length; i++) {
                    if (
                        lis[i].parentNode.style.backgroundColor ==
                        "rgb(245, 72, 65)"
                    ) {
                        var Gjson = {
                            specId: lis[i].getAttribute("spc"),
                            spcname: lis[i].getAttribute("spcname")
                        };
                        Gstring += lis[i].getAttribute("spc") + ",";
                        Garr.push(Gjson);
                        selectNum++;
                    }
                }
                Gstring = Gstring.substr(0, Gstring.length - 1);
            }

            //购物车选择规格数据
            this.speclist = Garr;
            this.specString = Gstring;
            // 存储下一界面所需数据,去确认订单
            if (selectNum == this.guigearr.length) {
                this.setres();
                this.$router.push({
                    path: "/goodsResult",
                    query: {
                        cateNo: this.$route.query.cateNo,
                        types:'00'
                    }
                });
            } else {
                Toast({
                    message: "请选择规格",
                    position: "middle",
                    duration: 3000
                });
            }
        },
        //点击规格
        lijiclick(e, itemchild, item) {
            //颜色设置
            let allnode = e.target.parentNode.parentNode.children;
            for (var i = 0; i < allnode.length; i++) {
                allnode[i].style.backgroundColor = "#cfd5db";
            }
            e.target.parentNode.style.backgroundColor = "#f54841";
            //颜色设置

            //  不同规格，对应不同价格
            this.gPrice(item);
        },
        //  不同规格，对应不同价格
        gPrice(item) {
            var selectNum = 0;
            var Gstring = "";
            var lis = this.$refs.guige;
            for (var i = 0; i < lis.length; i++) {
                if (
                    lis[i].parentNode.style.backgroundColor ==
                    "rgb(245, 72, 65)"
                ) {
                    Gstring += lis[i].getAttribute("spc") + ",";
                    selectNum++;
                }
            }
            Gstring = Gstring.substr(0, Gstring.length - 1);

            //规格都选完
            if (selectNum == this.guigearr.length) {
                this.$vux.loading.show({
                    text: "Loading"
                });
                queryProductSpecByPrice({ productId: item.id, specId: Gstring })
                    .then(response => {
                        if (response.rspCode == "0000") {
                            if (response.data.code == "0000") {
                                console.log(response.data.specPrice);
                                this.gShopPrice = response.data.specPrice;
                            } else {
                                Toast({
                                    message: response.data.rspMsg || "操作失败",
                                    position: "middle",
                                    duration: 3000
                                });
                            }
                        } else {
                            this.specifiCations = false;
                            Toast({
                                message: response.data.rspMsg || "操作失败",
                                position: "middle",
                                duration: 3000
                            });
                        }
                        this.$vux.loading.hide();
                    })
                    .catch(error => {
                        this.$vux.loading.hide();
                        console.log(error);
                    });
            }
        },
        // 立即购买规格隐藏
        hideSpecifiCations() {
            this.specifiCations = false;
            this.noSelectLiJiG();
        },
        // 立即购买规格不选去色
        noSelectLiJiG() {
            let lis = this.$refs.guige;
            for (var i = 0; i < lis.length; i++) {
                lis[i].parentNode.style.backgroundColor = "#cfd5db";
            }
        }
    },
    watch: {
        route() {
            if (this.route.path == "/categoryDetail") {
                this.getprodetail();
            }
        },
        specifiCations() {
            if (this.specifiCations == false) {
                this.noSelectLiJiG();
            }
        }
    }
};
</script>
<style lang="less" scoped>
@import "../../css/ckecked.css";
.guigeContent {
    max-height: 20rem;
    overflow-y: auto;
    padding-bottom: 10px;
}
.couponChoose {
    min-height: 5rem;
    max-height: 20rem;
    width: 100%;
    overflow-y: auto;
}
.couponList {
    position: fixed;
    padding: 1rem;
    bottom: 0rem;
    background: saddlebrown;
    z-index: 999;
    width: 100%;
    height: auto;
}
.couponLists {
    position: fixed;
    // padding: 1rem;
    bottom: 0rem;
    // background: saddlebrown;
    z-index: 999;
    width: 100%;
    height: auto;
}
.useState {
    position: relative;
    top: -0.5rem;
    left: -0.5rem;
    color: #ffffff;
    background: #f54841;
    height: 14px;
    padding: 2px 5px;
    border-radius: 14px;
    font-size: 0.8rem;
}
.wan {
    height: 40px;
    line-height: 40px;
    border-radius: 13px;
    font-size: 1.8rem;
    color: #ffffff;
    width: 100%;
    background-color: #f54841;
}
.weui-cell {
    padding: 0;
}
.red {
    background-color: #f54841;
}
.box {
    background-color: #f1f2f3;
    padding-bottom: 80px;
    .catetop {
        position: absolute;
        top: 240px;
        z-index: 3;
    }
    .cate {
        box-sizing: border-box;
        margin-left: 3%;
        width: 94%;
        border-radius: 13px;
        background-color: #ffffff;
        padding-left: 0.4rem;
        .colorss {
            color: #f54841;
        }
    }
    .padding {
        box-sizing: border-box;
        // margin-left: 4.5%;
        width: 100%;
        padding: 0 4.5%;
        img {
            height: 50%;
            width: 8%;
            margin-top: 3%;
        }
        p {
            color: #878787;
            // font-weight: bold;
            span:nth-of-type(1) {
                margin: 0 3%;
                width: 15%;
                text-align: center;
            }
            span:nth-of-type(2) {
                width: 70%;
                overflow: hidden;
                color: #d1d1d1;
            }
        }
    }
    .youhui {
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
            height: 25px;
            margin-top: 5px;
            transform: rotate(180deg);
            margin-right: 0.5rem;
        }
    }
    .bottom {
        z-index: 999999;
        width: 100%;
        height: 350px;
        padding-left: 4.5%;
        box-sizing: border-box;
        padding-right: 4.5%;
        padding-bottom: 60px;
        position: absolute;
        .hide {
            height: 10px;
            line-height: 10px;
            text-align: center;
            font-size: 1rem;
        }
        .list {
            width: 100%;
            height: 7rem;
            display: flex;
            .imgcla {
                width: 7rem;
                height: 7rem;
                float: left;
            }
            .con {
                padding-left: 10px;
                box-sizing: border-box;
                text-align: left;
                width: 69%;
                height: 7rem;
                float: left;
                .name {
                    height: 5rem;
                    line-height: 17px;
                    font-size: 1.5rem;
                    word-break: break-all;
                }
                .intg {
                    height: 2rem;
                    display: table-cell;
                    vertical-align: middle;
                }
            }
        }
        .numbutton {
            position: absolute;
            bottom: 0px;
            margin-bottom: 10px;
            z-index: 999;
            width: 91%;
            color: #fff;
            height: 40px;
            background-color: #f54841;
            line-height: 40px;
            border-radius: 5px;
            text-align: center;
        }
    }
    .bottoms {
        z-index: 999999;
        width: 100%;
        // height: 350px;
        padding-left: 4.5%;
        box-sizing: border-box;
        padding-right: 4.5%;
        padding-bottom: 1rem;
        padding-top:1.6rem;
        position: absolute;
        .quans {
            margin: 0 0 10px;
            width: 100%;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            border-radius: 13px;
            .left {
                text-indent: 0.5rem;
                background-color: #f1f2f3;
                width: 70%;
                text-align: left;
                border-radius: 13px;
                border-right: 2px solid #ffffff;
                p {
                    height: 30px;
                    line-height: 30px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    &:nth-of-type(1) {
                        position: relative;
                        top: 0.6rem;
                    }
                    &:nth-of-type(3) {
                        font-size: 0.8rem;
                    }
                }
                .colors {
                    color: #f54841;
                    font-size: 0.8rem;
                    position: relative;
                    top: 0.7rem;
                }
            }
            .right {
                width: 30%;
                height: 90px;
                border-radius: 13px;
                background-color: #f1f2f3;
                span {
                    position: relative;
                    top: 50px;
                    left: 15px;
                }
                p {
                    display: block;
                    text-align: center;
                    width: 75px;
                    height: 30px;
                    color: #ffffff;
                    line-height: 30px;
                    border-radius: 10px;
                    background-color: rgb(4, 0, 255);
                }
            }
        }
        .guige {
            .list {
                width: 100%;
                height: 7rem;
                display: flex;
                .imgcla {
                    width: 7rem;
                    height: 7rem;
                    float: left;
                }
                .con {
                    padding-left: 10px;
                    box-sizing: border-box;
                    text-align: left;
                    width: 69%;
                    height: 7rem;
                    float: left;
                    .name {
                        height: 4rem;
                        padding-top:1rem;
                        line-height: 17px;
                        font-size: 1.5rem;
                        word-break: break-all;
                    }
                    .intg {
                        height: 2rem;
                        display: table-cell;
                        vertical-align: middle;
                    }
                }
            }
            .content {
                width: 100%;
                .key {
                    width: 100%;
                    height: 35px;
                    line-height: 35px;
                    font-size: 1.8rem;
                    text-align: left;
                }
                .word {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    ul {
                        list-style: none;
                        height: 25px;
                        line-height: 25px;
                        border-radius: 10px;
                        text-align: center;
                        background-color: #cfd5db;
                        margin-right: 5px;
                        margin-bottom: 10px;
                        display: flex;
                        justify-content: center;
                        li {
                            padding: 0px 13px 0px 13px;
                        }
                    }
                }
            }
        }
        .hide {
            border-bottom: 1px solid #d1d1d1;
            height: 40px;
            line-height: 40px;
            width: 100%;
            text-align: center;
            margin-bottom: 20px;
        }

        .numbutton {
            position: absolute;
            bottom: 0px;
            margin-bottom: 10px;
            z-index: 999;
            width: 91%;
            color: #fff;
            height: 40px;
            background-color: #f54841;
            line-height: 40px;
            border-radius: 5px;
            text-align: center;
        }
    }
    .swiper-container {
        // margin-top: 3px;
        height: 220px;
        img {
            width: 100%;
            height: 220px;
            box-sizing: border-box;
        }
        .swiper-pagination-fraction,
        .swiper-pagination-custom,
        .swiper-container-horizontal > .swiper-pagination-bullets {
            bottom: 50px;
            margin-left: 80%;
            width: 50px;
            border-radius: 50px;
            opacity: 0.8;
            color: #ffffff;
            background-color: #644f4f;
        }
    }
    p {
        padding: 0 2% 0 2%;
        box-sizing: border-box;
        text-align: left;
        word-break: break-all;
        letter-spacing: 0px;
        display: flex;
        height: 40px;
        line-height: 40px;
        color: black;
    }
    .ft {
        color: #f54841;
    }
    .linet {
        font-size: 1.2rem;
        margin-left: 15px;
        text-decoration: line-through;
    }
    .details {
        // margin: 0 3%;
        box-sizing: border-box;
        text-align: left;
        word-break: break-all;
        letter-spacing: 0px;
        min-height: 120px;
        width:100%;
        margin:0 auto;
        padding:10px;
        overflow: hidden;
        text-indent: 0.5rem;
        line-height: 20px;
        background-color: #ffffff;
    }
    .name {
        // font-weight: bolder;
        font-size: 1.8rem;
    }
    .color {
        font-size: 1.8rem;
        color: #f54841;
        // font-style:oblique;
        // font-weight: bolder;
    }
    .buttonbox {
        position: fixed;
        bottom: 0px;
        margin-left: 4.5%;
        margin-bottom: 10px;
        z-index: 999;
        width: 91%;
        color: #fff;
        height: 40px;
        background-color: #f54841;
        line-height: 40px;
        border-radius: 5px;
        text-align: center;
    }
    .shop {
        bottom: 50px;
    }
    .bgcolor {
        background-color: #e5e5e5;
    }
    .flexfa {
        background-color: white;
        position: fixed;
        bottom: 0px;
        height: 60px;
        width: 100%;
        z-index: 10;
        // display: flex;
        // justify-content: space-between;
        div:nth-child(2) {
            // display:flex;
            // align-items: center;
            margin-right: 10px;
            border-radius: 50%;
            p:nth-child(1) {
                float: right;
                border-top-right-radius: 40px;
                border-bottom-right-radius: 40px;
                padding: 0 1rem;
                background-color: #c40002;
                height: 40px;
            }
            p:nth-child(2) {
                float: right;
                background-color: #f57a51;
                border-top-left-radius: 40px;
                border-bottom-left-radius: 40px;
                height: 40px;
                padding: 0 1rem;
            }
            p {
                margin-top: 10px;
                // width: 100px;
                color: #ffffff;
                font-size: 1.5rem;
                justify-content: space-around;
                height: 50px;
                align-items: center;
            }
        }
    }
    .graycolor {
        color: #8e8e93;
        position: relative;
        // top: -0.3rem;
    }
    .zhuan {
        text-decoration: line-through;
        color: #8e8e93;
        text-align: left;
        position: relative;
        top: -1rem;
    }
    .nameNew {
        position: relative;
        top: -0.5rem;
        overflow:hidden;
        line-height:19px;
    }
}
</style>

